<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${questionDTO.getTitle()}"></title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!--自己写的css放他后面-->
    <!--格式话代码ctrl+alt+l-->

    <!--页面渲染之后再加载js-->
    <script src="/js/jquery-3.3.1.min.js"></script>
    <!--bootstrap依赖jq必须在jq引入后引入bootstrap.min.js-->
    <script src="/js/bootstrap.min.js"></script>
    <!--自己写的jq代码放他两后面-->
    <style>
        .reset {
            position: absolute;
            right: 15px;
            bottom: 10px;
        }
    </style>
    <script src="/js/myjs.js"></script>
</head>
<body style="background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%) no-repeat fixed;">
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid"
     style="background-color: #ffffff;padding-bottom: 20px;margin: 0 150px 40px 150px;border-radius: 3px;">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12" style="border-right: 1px solid #8c8c8c;">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                 style="width: 100%;padding-bottom: 10px;margin-bottom: 20px; border-bottom: 1px solid #0f0f0f;"><h2
                    style="margin-left: 10px;"><span
                    class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&ensp;<span
                    th:text="${questionDTO.getTitle()}"></span></h2>
                <div style="color: #636e72;margin-left: 10px">
                    作者：<span th:text="${questionDTO.user.getName()}"></span>
                    &ensp;发布时间：<span th:text="${#dates.format(questionDTO.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                    &ensp;阅读数：<span th:text="${questionDTO.viewCount}"></span>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                 style="width: 100%; padding-bottom: 8px; border-bottom: 1px solid #0f0f0f;">
                <h3>问题描述 ：</h3>
                <div style="font-size: 20px;word-wrap: break-word;word-break: break-all;overflow: hidden;"
                     th:text="${questionDTO.getDescription()}"></div>
                <div th:if="${session.user != null && session.user.id == questionDTO.creator}" style="float: right;">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><a
                        th:href="@{'/publish/'+${questionDTO.getId()}}">&ensp;编辑&ensp;</a></div>
                <!--如果用户自己传值修改的话，有bug，得后台验证，已解决-->
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin:5px 10px 50px 0px; font-size:16px">
                <span th:each="tag:${questionDTO.getTag().split(',')}">
                    <span class="label label-info"><svg class="icon"
                                                        style="margin-right: 2px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                        viewBox="0 0 1024 1024" version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg" p-id="2848"><path
                            d="M849.5 465.9L566.8 183.3c-14.7-14.7-43.8-26.7-64.6-26.7l-214.7-0.1c-3.1 0-6.7 0.8-10 1.3l62.3 62.3c32.4 32.3 32.4 84.9 0 117.2-32.3 32.4-84.9 32.4-117.2 0L157 271.6c-1.5 6.3-2.5 12.4-2.5 18l0.6 215.5c0 20.9 12.1 49.9 26.8 64.5l281.7 281.7c27.5-90.4 76.9-173.4 144.3-240.8 67.6-67.7 150.9-117.1 241.6-144.6zM309.8 307.4c15.8-15.8 15.8-41.5 0-57.2L135.6 75.9C119.9 60 94.2 60 78.4 75.9a40.529 40.529 0 0 0-0.1 57.2l174.3 174.3c15.7 15.7 41.4 15.7 57.2 0zM930 546.9l-46.6-46.6c-89.2 22.8-174.6 69.3-245.4 140.2-70.9 70.9-117.3 156.3-140.2 245.4l46.6 46.6c36.7 36.7 96.9 36.7 133.7 0l252-252c36.6-36.7 36.6-96.9-0.1-133.6z"
                            p-id="2849"></path></svg><span th:text="${tag}"></span></span>
                </span>
            </div>
            <!--回复内容-->
            <h3 style="margin-left: 5px" th:if="${questionDTO.getCommentCount()!=0}"><span
                    th:text="${questionDTO.getCommentCount()}"></span>个回复</h3>
            <div th:if="${questionCommentS.size()!=0}" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                 style="margin-top: 5px;border: 1px solid #b2bec3;">
                <div style="margin-bottom: 20px;margin-top: 20px;padding-bottom: 5px">

                    <div class="media" style="border-bottom: 1px #dfe6e9 solid;padding-bottom: 5px"
                         th:each="comment:${questionCommentS}">
                        <div class="media-left media-middle" style="vertical-align:text-top;">
                            <img style="width: 50px; height: 50px" th:src="${comment.getUser().getAvatarUrl()}"
                                 class="media-object">
                        </div>
                        <div class="media-body" style="font-size: 20px;width: 100%;">
                            <h5 class="media-heading" style="color: #636e72"
                                th:text="${comment.getUser().getName()}"></h5>
                            <span style="white-space:normal; word-break:break-all;overflow:hidden;"
                                  th:text="${comment.getContent()}"></span>
                            <div style="width: 100%;margin-top: 5px;">
                                <span>
                                    <span style="padding-bottom: 2px;border-radius: 5px;border: 1px solid #DFE6E9"><span
                                            style="margin:0 5px;"><svg class="icon"
                                                                       style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                                       viewBox="0 0 1024 1024" version="1.1"
                                                                       xmlns="http://www.w3.org/2000/svg" p-id="579"><path
                                            d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                                            p-id="580"></path></svg><span
                                            style="font-size: 15px;color: #636E72;margin:0px 5px"
                                            th:text="${comment.getLikeCount()}"></span></span></span>
                                    <span onclick="offTwo(this)" onn="t" th:id="${comment.getId()}"
                                          th:data-id="${comment.getId()}"
                                          style="padding-bottom: 2px;border-radius: 5px;border: 1px solid #DFE6E9"><span
                                            style="margin:0 5px;"><svg class="icon"
                                                                       style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                                       viewBox="0 0 1024 1024" version="1.1"
                                                                       xmlns="http://www.w3.org/2000/svg" p-id="1360"><path
                                            d="M821.333333 800H547.584l-86.464 96.074667a32 32 0 1 1-47.573333-42.816l96-106.666667A32 32 0 0 1 533.333333 736h288a53.333333 53.333333 0 0 0 53.333334-53.333333V234.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333334v448a53.333333 53.333333 0 0 0 53.333334 53.333333h138.666666a32 32 0 0 1 0 64H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V234.666667c0-64.8 52.533333-117.333333 117.333334-117.333334h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333334v448c0 64.8-52.533333 117.333333-117.333334 117.333333zM704 341.333333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM512 512a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h192z"
                                            p-id="1361"></path></svg><span
                                            style="font-size: 15px;color: #636E72;margin:0px 5px"
                                            th:text="${comment.getCommentCount()}"></span></span></span>
                                </span>
                                <span style="margin-left:70%;font-size: 15px;"
                                      th:text="${#dates.format(comment.getGmtCreate(),'yyyy-MM-dd HH:mm')}"></span>
                                <!--点击显示二级评论-->

                                <div style="margin:10px 0px;border-radius: 5px;padding: 5px;border: 1px solid #636E72;position: relative;"
                                     class="collapse"
                                     th:id="${'comment-'+comment.getId()}">
                                    <div style="border-bottom: 1px solid #636E72;margin: 5px 0px"
                                         th:id="${'commentboby-'+comment.getId()}">
                                        <!--显示二级评论,js追加
                                        --<div class="media" style="border-bottom: 1px solid #DFE6E9;padding: 15px 0px;margin-bottom: 10px">
                                           -- <div class="media-left media-middle" style="vertical-align:text-top;">
                                                --<img class="media-object" style="width: 50px; height: 50px" th:src="${comment.getUser().getAvatarUrl()}">
                                            --</div>
                                            --<div class="media-body" style="font-size: 20px;width: 100%;">
                                                --<h5 class="media-heading"><span style="color: #0984e3">名字</span> · <span style="color: #636E72" th:text="${#dates.format(comment.getGmtCreate(),'yyyy-MM-dd HH:mm')}"></span></h5>
                                                --<span style="white-space:normal; word-break:break-all;overflow:hidden;"
                                                      th:text="${comment.getContent()}"></span>
                                            --</div>
                                        </div>
                                        -->

                                    </div>
                                    <!--二级评论-->
                                    <textarea class="form-control" th:id="'commentText'+${comment.getId()}"
                                              placeholder="请输入你的回复内容..."
                                              rows="2" style="resize: none;"></textarea>
                                    <button th:onclick="'commentReply('+${comment.getId()}+')'" class="btn btn-success"
                                            style="margin-left: 92.7%;margin-top: 10px">回复
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!--编辑器-->
            <div id="edit" style="margin-top: 15px" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <label for="description">问题回复:</label>
                <p></p>
                <div style="position: relative;">
                    <input type="hidden" id="questionId" th:value="${questionDTO.getId()}">
                    <textarea class="form-control" name="description" id="description"
                              placeholder="请输入你的回复内容..."
                              rows="15" style="resize: none;"></textarea>
                    <div class="reset"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
                </div>
                <button class="btn btn-success" onclick="postReply()" style="margin-left: 94%;margin-top: 10px"
                        id="reply">回复
                </button>
                <script>
                    $(".reset").click(function () {
                        $("#description").val("");
                    })
                </script>
            </div>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12" style="margin-top: 30px">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="border-bottom: solid 1px #b2bec3;">
                <h4>发起人</h4>
                <div class="media" style="margin-bottom: 20px">
                    <div class="media-left media-middle">
                        <a href="#">
                            <img style="width: 50px; height: 50px" class="img-rounded media-object"
                                 th:src="${questionDTO.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <p></p>
                        <a href="#">&ensp;<span style="font-size: 20px" th:text="${questionDTO.user.getName()}"></span></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="border-bottom: solid 1px #b2bec3;">
                <h3 style="padding-left: 25%"><span><svg class="icon"
                                                         style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                                                         viewBox="0 0 1024 1024" version="1.1"
                                                         xmlns="http://www.w3.org/2000/svg" p-id="2084"><path
                        d="M854.518 535.606c15.444-25.941 29.697-53.796 42.141-83.619a581.703 581.703 0 0 0 9.386-27.169c-9.416 26.895-22.468 56.594-40.14 89.263a686.967 686.967 0 0 1-11.387 21.525zM117.997 428.126a584.106 584.106 0 0 0 8.323 23.863c12.048 28.872 25.791 55.899 40.67 81.134a685.278 685.278 0 0 1-10.026-19.041c-16.951-31.337-29.649-59.939-38.967-85.956zM129.098 208.044s-0.936 0.87-2.494 2.66c-6.561 9.673-20.675 52.047 27.215 223.195 67.352 181.5 170.466 287.08 248.706 345.041 52.132 35.12 94.042 54.939 108.965 61.559 14.82-6.587 56.274-26.211 107.749-60.744 78.371-57.784 182.141-163.5 249.81-345.856 47.89-171.147 33.776-213.521 27.215-223.195-1.558-1.791-2.494-2.66-2.494-2.66s1.069 0.559 2.494 2.66c6.09 6.997 21.694 28.072 28.18 66.332-3.381-23.364-10.765-43.342-22.103-59.682-25.932-37.372-73.49-56.32-141.354-56.32-62.681 0-121.153 31.572-173.793 93.839-40.071 47.399-61.076 95.068-61.283 95.544l-14.412 33.058-14.412-33.058c-0.207-0.472-21.564-48.75-61.798-96.146-52.52-61.868-110.822-93.237-173.289-93.237-67.866 0-115.426 18.95-141.359 56.323-10.596 15.27-17.738 33.717-21.388 55.135 6.901-35.392 21.508-55.072 27.352-61.787 1.424-2.102 2.493-2.661 2.493-2.661z"
                        fill="#E0344C" p-id="2085"></path><path
                        d="M928.175 199.428c-32.156-46.341-88.406-69.838-167.188-69.838-40.031 0-78.981 11.208-115.768 33.312-28.925 17.38-56.527 41.494-82.038 71.671-23.443 27.731-40.692 55.283-51.683 74.958-10.992-19.675-28.242-47.228-51.686-74.959-25.513-30.177-53.116-54.291-82.042-71.671-36.79-22.103-75.74-33.311-115.77-33.311-78.784 0-135.036 23.498-167.193 69.841-22.032 31.753-31.953 73.371-29.486 123.699 2.076 42.343 12.724 89.493 31.646 140.139l0.216 0.545c27.933 67.026 66.79 130.209 115.492 187.793 38.882 45.972 84.087 88.493 134.362 126.381 85.664 64.559 155.663 93.03 158.601 94.211l5.861 2.355 5.862-2.355c2.937-1.181 72.931-29.652 158.591-94.211 50.272-37.889 95.476-80.409 134.355-126.381 48.7-57.584 87.556-120.766 115.489-187.792l0.216-0.545c18.923-50.648 29.571-97.798 31.648-140.141 2.467-50.33-7.453-91.949-29.485-123.701zM511.49 841.102l-0.056-0.019-0.056 0.019 0.056-0.019a0.008 0.008 0 0 1-0.004-0.002c-3.922-1.364-218.106-76.701-344.441-307.958-14.879-25.235-28.622-52.262-40.67-81.134a584.106 584.106 0 0 1-8.323-23.863c-24.838-69.353-25.631-120.317-18.745-155.634 3.651-21.418 10.793-39.865 21.388-55.135 25.933-37.373 73.493-56.323 141.359-56.323 62.467 0 120.769 31.369 173.288 93.237 40.234 47.397 61.592 95.675 61.798 96.146l14.412 33.058 14.412-33.058c0.207-0.476 21.212-48.144 61.283-95.544 52.64-62.267 111.112-93.839 173.793-93.839 67.864 0 115.422 18.948 141.354 56.32 11.338 16.34 18.722 36.318 22.103 59.682 5.85 34.513 4.278 83.009-18.399 147.783a582.505 582.505 0 0 1-9.386 27.169c-12.444 29.823-26.697 57.678-42.141 83.619-126.503 229.314-339.169 304.116-343.076 305.474a0.008 0.008 0 0 0-0.004 0.002l0.055 0.019z"
                        fill="" p-id="2086"></path><path
                        d="M511.439 841.081c1.792-0.623 47.202-16.647 107.8-61.326-51.474 34.533-92.929 54.157-107.749 60.744-14.923-6.62-56.833-26.438-108.965-61.559 61.15 45.302 107.102 61.515 108.905 62.141l0.004 0.002 0.005-0.002z"
                        fill="" p-id="2087"></path><path
                        d="M153.82 433.899c-47.89-171.147-33.776-213.521-27.215-223.195-5.845 6.715-20.452 26.395-27.352 61.787-6.886 35.317-6.093 86.282 18.745 155.634 9.318 26.017 22.016 54.619 38.967 85.956a685.278 685.278 0 0 0 10.026 19.041C293.324 764.38 507.509 839.718 511.43 841.081c-1.803-0.626-47.754-16.839-108.905-62.141-78.239-57.961-181.354-163.541-248.705-345.041zM129.098 208.044s-1.069 0.559-2.494 2.66c1.559-1.79 2.494-2.66 2.494-2.66zM511.49 841.102l-0.056-0.019 0.056 0.019zM511.43 841.081l0.005 0.002z"
                        fill="#FFFFFF" p-id="2088"></path><path
                        d="M869.049 433.899c-67.67 182.356-171.439 288.072-249.81 345.856-60.598 44.679-106.008 60.703-107.8 61.326 3.908-1.359 216.574-76.161 343.079-305.475a688.027 688.027 0 0 0 11.387-21.524c17.672-32.67 30.724-62.368 40.14-89.263 22.677-64.774 24.25-113.27 18.399-147.783-6.485-38.26-22.09-59.334-28.18-66.332 6.562 9.674 20.675 52.048-27.215 223.195z"
                        fill="#E00505" p-id="2089"></path><path
                        d="M893.77 208.044s0.936 0.87 2.494 2.66c-1.424-2.101-2.494-2.66-2.494-2.66zM511.435 841.083l-0.056 0.019 0.056-0.019a0.008 0.008 0 0 0 0.004-0.002l-0.004 0.002z"
                        fill="#E00505" p-id="2090"></path></svg></span><span style="color: red;margin-left: 5px">支持站主</span></h3>
                <div><img class="img-thumbnail" style="float: left;" width="100px" height="100px" src="/image/wxzhifu.jpg" alt="微信支付奖励小编">
                </div>
                <div><img class="img-thumbnail" style="margin-left: 40px" width="100px" height="100px" src="/image/zfbzhifu.jpg"
                          alt="支付宝支付奖励小编"></div>
                <p style="margin-top: 10px;color: #44bd32"><span style="margin-left: 35px">微信</span><span style="margin-left: 105px">支付宝</span></p>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin: 10px 0">
                <h4>相关问题</h4>
                <ul style="font-size: 17px;padding-left: 0px;">
                    <li th:each="questionTag:${TagQuestionDTOList}" style="list-style: none;margin-bottom: 4px;">
                        <a th:href="@{'/question/'+ ${questionTag.getId()}}" th:text="${questionTag.getTitle()}"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>